<template>
	<view class="big-box">
		<!-- 顶部工具栏 -->
		<view class="top-tools">
			<!-- 靠左 -->
			<view class="tools-left">
				<!-- 返回按钮 -->
				<view class="back-btn tool-item" @click="back">
					<image class="tool-pic" src="../../static/pic/goods-detail/back.png" mode=""></image>
				</view>
			</view>
			<!-- 靠右 -->
			<view class="tools-right">
				<!-- 分享按钮 -->
				<view class="share-btn tool-item">
					<image class="tool-pic" src="../../static/pic/goods-detail/share.png" mode=""></image>
				</view>
				<!-- 购物车按钮 -->
				<view class="gwc-btn tool-item">
					<image class="tool-pic" src="../../static/pic/goods-detail/gwc.png" mode=""></image>
				</view>
				<!-- 更多按钮 -->
				<view class="more-btn tool-item">
					<image class="tool-pic" src="../../static/pic/goods-detail/more.png" mode=""></image>
				</view>
			</view>

		</view>

		<!-- 轮播图数量 -->
		<view class="swiper-num">
			{{swiperIndex}}/6
		</view>
		<!-- 商品图片-轮播图 -->
		<swiper class="goods-pic-box" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			@change="getSwiperIndex">
			<!-- 轮播图 -->
			<swiper-item class="swiper-item" v-for="i of 6" :key="i">
				<image class="goods-pic" :src="dataNow.pic" mode="heightFix"></image>
			</swiper-item>
		</swiper>
		<!-- 价格优惠/热销 -->
		<view class="box-two">
			<!-- 上方 -->
			<!-- 价格信息/活动名称 -->
			<view class="top-box">
				<!-- 价格/左 -->
				<view class="goods-price">
					热销款券后￥
					<view class="price">
						{{dataNow.price}}
					</view>
					<!-- 优惠前价格 -->
					<view class="price-before">
						优惠前价格￥{{dataNow.price * 0.8}}
					</view>
				</view>
				<!-- 活动/右 -->
				<view class="act-info">
					{{dataNow.activity}}
				</view>
			</view>
			<!-- 下方 -->
			<!-- 折扣情况/提示 -->
			<view class="bottom-box">
				<!-- 打折情况/左 -->
				<view class="discount-sell">
					<!-- 打折信息 -->
					<view class="discount">
						官方0.8折
						<image class="discount-pic" src="../../static/pic/goods-detail/xiajiang.png" mode="">
						</image>
						立加{{dataNow.price*0.2}}
					</view>
					<!-- 销售情况 -->
					<view class="sell-num">
						已售
						<view class="num">
							{{buyPeople(dataNow.buyCount)}}
						</view>
					</view>
				</view>
				<!-- 提示信息/右 -->
				<view class="tip-info">
					热卖中下单立抢
				</view>
			</view>
		</view>
		<!-- 消费券信息/商品名称及相关信息 -->
		<view class="goods-main-msg">
			<!-- 消费券信息 -->
			<view class="xiaofeiquan">
				<view class="xiaofeiquan-item">
					花呗减免
				</view>
				<view class="xiaofeiquan-item">
					店铺卷满{{dataNow.price + 100}}减99
				</view>
			</view>
			<!-- 商品名称/相关信息 -->
			<view class="goods-info">
				<!-- 商品名称 -->
				<view class="goods-name">
					{{dataNow.title}}
				</view>
				<!-- 相关信息 -->
				<view class="goods-about-info">
					<view class="goods-about-info-item guanfang">
						<image class="item-pic" src="../../static/pic/goods-detail/guard.png" mode=""></image>
						急速退款
					</view>
					<view class="goods-about-info-item">
						多人评价"好吃爱吃"
					</view>
					<view class="goods-about-info-item">
						超1千人加购
					</view>
				</view>
			</view>
		</view>
		<!-- 发货信息 -->
		<view class="deliver-info">
			<!-- 发货时间 -->
			<view class="send-time">
				<!-- 图标 -->
				<image class="pic-front" src="../../static/pic/goods-detail/car.png" mode=""></image>
				<view class="send-time-item">
					预计6小时内发货
				</view>
				<view class="send-time-item">
					承诺48小时内发货
				</view>
			</view>
			<!-- 发货信息 -->
			<view class="send-info">
				<view class="send-info-item">
					多仓发货 快递：免运费
				</view>
				<view class="send-info-item guanfang">
					<image class="send-info-item-pic" src="../../static/pic/goods-detail/yes-green.png">
					</image>
					官方承诺【送货上门】
				</view>
			</view>
		</view>
		<!-- 保价服务 -->
		<view class="keep-price">
			<!-- 图标 -->
			<image class="pic-front" src="../../static/pic/goods-detail/heart.png" mode=""></image>
			价保服务 · 假一赔四 · 退货包运费 · 急速退款
		</view>
		<!-- 商品信息 -->
		<view class="goods-more-info">
			<!-- 图标 -->
			<image class="pic-front" src="../../static/pic/goods-detail/brand.png" mode=""></image>
			品牌 · 品名 · 上市时间 · 鞋帮高度 · 鞋码
		</view>
		<!-- 分类信息 -->
		<view class="goods-sort">
			<!-- 左侧 -->
			<view class="sort-left">
				<!-- 图标 -->
				<image class="pic-front" src="../../static/pic/goods-detail/sort.png" mode=""></image>
				<!-- 商品图片 -->
				<image v-for="item of dataNow.colors" :key="item.pid" class="goods-sort-item" :src="item.pic"></image>
			</view>
			<!-- 右侧 -->
			<view class="sort-right">
				<view class="desc-msg">
					共{{dataNow.colors.length}}种颜色可选
				</view>
			</view>

		</view>


		<!-- 底部购物栏 -->
		<view class="bottom-tools">
			<!-- 左侧 -->
			<view class="bottom-tools-left">
				<view class="bottom-left-item" v-for="item of btmToolsArr" :key="item.tid">
					<image class="bottom-left-item-pic" :src="item.picUrl" mode=""></image>
					{{item.text}}
				</view>
			</view>
			<!-- 右侧 -->
			<view class="bottom-tools-right">
				<!-- 添加至购物车 -->
				<view class="bottom-right-gwc">
					<image class="add-gwc-pic" src="../../static/pic/goods-detail/addgwc.png" mode=""></image>
				</view>
				<!-- 立即购买 -->
				<view class="bottom-right-purchase">
					立即购买
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperIndex: 1,
				btmToolsArr: [{
						tid: 'dianpu2134',
						text: "店铺",
						picUrl: "../../static/pic/goods-detail/dianpu.png"
					},
					{
						tid: 'kefu2134',
						text: "客服",
						picUrl: "../../static/pic/goods-detail/kefu.png"
					},
					{
						tid: 'shoucang2134',
						text: "收藏",
						picUrl: "../../static/pic/goods-detail/shoucang.png"
					}
				],
				dataNow: null,
				goodsData: [{
						gid: '321314151',
						type: '1',
						title: "阿迪达斯三叶草凉鞋厨具",
						price: 210,
						buyCount: 510,
						info: 1,
						pic: '../../static/image/shangping/zkas5jgo.png',
						activity: "冲奥燃动季",
						colors: [{
							pid: 'zkas5jgo',
							pic: '../../static/image/shangping/zkas5jgo.png'
						}]
					}, {
						gid: '41234871',
						type: '1',
						title: "外星人游戏本笔记本电脑x16 R2 Ultra RTX4060电竞玩家高考学生电脑办公学习设计师【2024新品】",
						price: 3400,
						buyCount: 5100,
						info: 5,
						pic: '../../static/image/shangping/y22tunwn.png',
						activity: "科技环视季",
						colors: [{
							pid: 'y22tunwn',
							pic: '../../static/image/shangping/y22tunwn.png'
						}]
					},
					{
						gid: '625421',
						type: '1',
						title: "耐克T恤男子OVERSIZE风短袖上衣夏季宽松FB8166",
						price: 1200,
						buyCount: 10010,
						info: 4,
						pic: '../../static/image/shangping/wivlmauo.png',
						activity: "飞翔天空季",
						colors: [{
							pid: 'wivlmauo',
							pic: '../../static/image/shangping/wivlmauo.png'
						}]
					}, {
						gid: '6377388211',
						type: '1',
						title: "官方耐克乔丹AJ1板鞋男运动鞋秋季新款低帮缓震轻便HM3711 ",
						price: 160,
						buyCount: 130,
						info: 2,
						pic: '../../static/image/shangping/5uku5aoq.png',
						activity: "冲奥燃动季",
						colors: [{
							pid: '5uku5aoq',
							pic: '../../static/image/shangping/5uku5aoq.png'
						}, {
							pid: 'zkas5jgo',
							pic: '../../static/image/shangping/zkas5jgo.png'
						}]
					},
					{
						gid: '123121151',
						type: '1',
						title: "上海迪士尼玲娜贝儿",
						price: 20,
						buyCount: 1510,
						info: 3,
						pic: '../../static/image/shangping/4wc2wtut.png',
						activity: "快乐暑假季",
						colors: [{
							pid: '4wc2wtut',
							pic: '../../static/image/shangping/4wc2wtut.png'
						}]
					}, {
						gid: '5611234v344',
						type: '1',
						title: "爱马仕包包",
						price: 54000,
						buyCount: 120,
						info: 2,
						pic: '../../static/image/shangping/qp4059d3.png',
						activity: "高雅档次季",
						colors: [{
							pid: 'qp4059d3',
							pic: '../../static/image/shangping/qp4059d3.png'
						}]
					}
				],
			};
		},
		methods: {
			// 获取当前轮播图index
			getSwiperIndex(e) {
				this.swiperIndex = e.detail.current + 1;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			buyPeople(num) {
				if (num < 100) return num
				else if (num < 200) return '100+'
				else if (num < 300) return '200+'
				else if (num < 400) return '300+'
				else if (num < 500) return '400+'
				else if (num < 600) return '500+'
				else if (num < 700) return '600+'
				else if (num < 800) return '700+'
				else if (num < 900) return '800+'
				else if (num < 1000) return '900+'
				else if (num < 2000) return '1000+'
				else if (num < 5000) return '2000+'
				else if (num < 10000) return '5000+'
				else return '10000+'
			},
		},
		onLoad(options) {
			const goods_id = options.goods_id;
			this.goodsData.map(data => {
				if (data.gid == goods_id) this.dataNow = data
			})
			if (!this.dataNow) {
				uni.showToast({
					title: "数据加载失败",
					icon: 'none',
					duration: 3000
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)

			}
		}
	}
</script>

<style lang="scss">
	.big-box {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		padding-bottom: 120rpx;
	}

	.swiper-num {
		position: absolute;
		right: 30rpx;
		top: 90rpx;
		padding: 4rpx 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50rpx;
		height: 30rpx;
		font-size: 26rpx;
		color: #fff;
		background-color: rgb(131, 131, 131);
		z-index: 99;
	}

	.top-tools {
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 2%;
		width: 96%;
		height: 80rpx;
		z-index: 99;

		.tools-left {
			display: flex;
		}

		.tools-right {
			display: flex;
			justify-content: space-between;
			width: 200rpx;
		}

		.tool-item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60rpx;
			height: 60rpx;
			border-radius: 10rpx;
			background-color: rgba(131, 131, 131, .5);
			cursor: pointer;

			.tool-pic {
				width: 80%;
				height: 80%;
			}
		}
	}

	.goods-pic-box {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 600rpx;
		background-color: #fff;

		.swiper-item {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.goods-pic {
			width: 100%;
			height: 100%;
		}
	}

	.box-two {
		padding: 0 2%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 96%;
		height: 160rpx;
		color: #fff;
		background-color: rgb(255, 46, 49);

		.top-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 50rpx;
			font-size: 28rpx;
			width: 98%;
			margin-left: 2%;
			margin-bottom: 10rpx;

			.goods-price {
				display: flex;
				align-items: center;

				.price {
					display: flex;
					font-size: 40rpx;
				}

				.price-before {
					display: flex;
					font-size: 29rpx;
					color: rgb(220, 220, 220);
					margin-left: 10rpx;
				}
			}

			.act-info {
				font-size: 32rpx;
				font-weight: 600;
			}
		}


		.bottom-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 98%;
			margin-left: 2%;

			.discount-sell {
				display: flex;
				align-items: center;
				justify-content: center;

				.discount {
					padding: 2rpx 8rpx;
					border-radius: 6rpx;
					display: flex;
					align-items: center;
					color: rgb(255, 46, 49);
					background-color: rgb(253, 253, 254);
					font-weight: 600;
					letter-spacing: 1rpx;
				}

				.discount-pic {
					display: flex;
					align-items: center;
					height: 30rpx;
					width: 30rpx;
				}

				.sell-num {
					display: flex;
					color: rgb(220, 220, 220);
					font-size: 26rpx;
					margin-left: 10rpx;

					.num {
						display: flex;
					}
				}


			}

			.tip-info {
				display: flex;
				font-size: 26rpx;
				color: rgb(220, 220, 220);
				letter-spacing: 1rpx;
			}
		}


	}

	.pic-front {
		margin-right: 10rpx;
		height: 34rpx;
		width: 34rpx;
	}

	.goods-main-msg {
		display: flex;
		flex-direction: column;
		width: 96%;
		margin: 0 2%;

		.xiaofeiquan {
			position: relative;
			display: flex;
			align-items: center;
			height: 100rpx;
			color: #FF8C00;

			.xiaofeiquan-item {
				padding: 4rpx;
				margin-right: 10rpx;
				border: 2rpx solid #FF8C00;
				font-size: 30rpx;
				letter-spacing: 1rpx;
				border-radius: 10rpx;
			}
		}

		.xiaofeiquan::after {
			position: absolute;
			right: 20rpx;
			top: 42rpx;
			content: "";
			width: 16rpx;
			height: 16rpx;
			border-right: 2rpx solid rgb(180, 180, 180);
			border-bottom: 2rpx solid rgb(180, 180, 180);
			transform: rotate(-45deg);
			/* 添加过渡 */
			transition: all .4s;
			cursor: pointer;
		}

		.guanfang {
			color: rgb(60, 179, 113);
		}

		.goods-info {
			display: flex;
			justify-content: center;
			flex-direction: column;

			.goods-name {
				font-weight: 600;
				font-size: 34rpx;
				margin-bottom: 10rpx;
				color: #000;
			}

			.goods-about-info {
				display: flex;

				.goods-about-info-item {
					padding: 2rpx 4rpx;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					border: 1rpx solid rgb(200, 200, 200);
					border-radius: 10rpx;
					color: rgb(153, 95, 52);
					margin-right: 10rpx;

					.item-pic {
						height: 30rpx;
						width: 30rpx;
					}
				}

				.guanfang {
					color: rgb(60, 179, 113);
				}

			}
		}
	}

	.deliver-info {
		display: flex;
		flex-direction: column;
		height: 138rpx;
		border-bottom: 2rpx solid rgb(230, 230, 230);
		width: 96%;
		margin: 0 2%;

		.send-time {
			position: relative;
			display: flex;
			align-items: flex-end;
			height: 64rpx;
			width: 100%;
			margin-bottom: 10rpx;

			.send-time-item {
				color: rgb(60, 179, 113);
			}
		}

		.send-time::after {
			position: absolute;
			right: 20rpx;
			top: 40rpx;
			content: "";
			width: 16rpx;
			height: 16rpx;
			border-right: 2rpx solid rgb(180, 180, 180);
			border-bottom: 2rpx solid rgb(180, 180, 180);
			transform: rotate(-45deg);
			/* 添加过渡 */
			transition: all .4s;
			cursor: pointer;
		}

		.send-info {
			display: flex;
			align-items: flex-start;
			height: 64rpx;
			margin-left: 44rpx;
			font-size: 28rpx;

			.send-info-item {
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				color: rgb(180, 180, 180);
				border-left: 1rpx solid rgb(220, 220, 220);

				.send-info-item-pic {
					height: 28rpx;
					width: 28rpx;
				}
			}

			.send-info-item:nth-child(1) {
				padding-left: 0;
				border-left: none;
			}

			.guanfang {
				color: rgb(60, 179, 113);
			}

		}
	}

	.keep-price {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 10rpx 2%;
		height: 60rpx;
		width: 96%;
		color: rgb(131, 131, 131);
		letter-spacing: 1rpx;
		font-size: 30rpx;
	}

	.keep-price::after {
		position: absolute;
		right: 20rpx;
		top: 25rpx;
		content: "";
		width: 16rpx;
		height: 16rpx;
		border-right: 2rpx solid rgb(180, 180, 180);
		border-bottom: 2rpx solid rgb(180, 180, 180);
		transform: rotate(-45deg);
		/* 添加过渡 */
		transition: all .4s;
		cursor: pointer;
	}

	.goods-more-info {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 10rpx 2%;
		height: 60rpx;
		width: 96%;
		color: rgb(131, 131, 131);
		letter-spacing: 1rpx;
		font-size: 30rpx;
	}

	.goods-more-info::after {
		position: absolute;
		right: 20rpx;
		top: 25rpx;
		content: "";
		width: 16rpx;
		height: 16rpx;
		border-right: 2rpx solid rgb(180, 180, 180);
		border-bottom: 2rpx solid rgb(180, 180, 180);
		transform: rotate(-45deg);
		/* 添加过渡 */
		transition: all .4s;
		cursor: pointer;
	}

	.goods-sort {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 10rpx 2%;
		height: 60rpx;
		width: 96%;

		.sort-left,
		.sort-right {
			display: flex;
			align-items: center;
		}

		.sort-right {
			margin-right: 50rpx;
			color: rgb(181, 181, 181);
			letter-spacing: 2rpx;
		}

		.goods-sort-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 40rpx;
			height: 40rpx;
			margin-left: 10rpx;
		}

		.desc-msg {
			display: flex;
			justify-content: flex-end;
		}
	}

	.goods-sort::after {
		position: absolute;
		right: 20rpx;
		top: 25rpx;
		content: "";
		width: 16rpx;
		height: 16rpx;
		border-right: 2rpx solid rgb(180, 180, 180);
		border-bottom: 2rpx solid rgb(180, 180, 180);
		transform: rotate(-45deg);
		/* 添加过渡 */
		transition: all .4s;
		cursor: pointer;
	}

	.bottom-tools {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 2%;
		width: 96%;
		height: 120rpx;
		z-index: 99;
		background-color: #fff;
		border-top: 2rpx solid rgb(211, 211, 211);

		.bottom-tools-left {
			display: flex;
			align-items: center;

			.bottom-left-item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 120rpx;
				height: 120rpx;
				color: rgb(161, 161, 161);

				.bottom-left-item-pic {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.bottom-tools-right {
			display: flex;
			align-items: center;

			.bottom-right-gwc {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 30rpx;
				height: 80rpx;
				width: 80rpx;
				background-color: rgb(249, 153, 52);
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;

				.add-gwc-pic {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80%;
					height: 80%;
				}
			}

			.bottom-right-purchase {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 20rpx;
				height: 80rpx;
				width: 150rpx;
				background-color: rgb(250, 82, 35);
				color: #fff;
				border-top-right-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
			}
		}
	}
</style>